<template>
    <div class="container">
        <div id="main" style="height: 250px; width: 300px;">
            <v-chart :option="option"></v-chart>
        </div>
    </div>
    <div @click="flash" class="refresh">
        <span>刷新</span><i class="fa-solid fa-arrows-rotate"></i>
    </div>
</template>

<script setup>
import { inject, onMounted, ref } from 'vue';
import axios from 'axios';
import { bar } from '../utils/barDraw';
import { mapStore } from '@/store';
import { getEvent } from '../Hooks/getEventHook';
// const { flash } = getEvent()
const store = mapStore()
const option = ref()
const count = ref(1)
let map
onMounted(async () => {
    map = inject('$map')
    const res = await axios.get('http://39.103.151.139:8000/gis/event')
    res.data.features.forEach(item_ => {
        let index = store.event.findIndex(item => item.type === item_.properties.name)
        if (index === -1) {
            // 如果不存在，则将新对象添加到 eventType 数组
            store.event.push({
                type: item_.properties.name,
                typeCount: count.value
            });
        } else {
            store.event[index].typeCount++;
        }
    })

    // bar(option.value, event.value.map(item => item.type), event.value.map(item => item.typeCount))

    renderEcharts()
})

function renderEcharts() {
    option.value = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: store.event.map(item => item.type),
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: store.event.map(item => item.typeCount)
            }
        ]
    };
}

const flash = () => {
    store.eventType = []
    store.event = []
    // 获取所有图层
    let layers = map.getStyle().layers
    // 获取对应id图层
    let layers_id = layers.filter(item => item.id.startsWith('event'))
    // 遍历图层
    layers_id.forEach(layer => {
        // 查询图层上的渲染要素
        let features = map.queryRenderedFeatures({
            layers: [layer.id]
        })
        // 遍历图层 打印信息
        features.forEach(feature => {
            let index = store.eventType.findIndex(item => item.type === feature.properties.name);
            if (index === -1) {
                // 如果不存在，则将新对象添加到 eventType 数组
                store.eventType.push({
                    type: feature.properties.name,
                    typeCount: count.value
                });
            } else {
                store.eventType[index].typeCount++;
            }
        })
    })
    store.event = store.eventType
    renderEcharts()
}

</script>

<style scoped lang="scss">
.container {
    background: url('/src/assets/大屏image素材/卡片-框/dataBg.png');
    width: 350px;
    height: 250px;
    position: fixed;
    top: 52%;
    left: 5%;

    #main {
        z-index: 2000;
    }


}

.refresh {
    position: fixed;
    top: 58%;
    left: 24%;
    z-index: 3000;

    span,
    i {
        color: #fff
    }
}
</style>
